import { mouseposition } from '../global/location'
import server from './server'
import luckysheetsizeauto from './resize'
import { modelHTML } from './constant'
import { checkProtectionAuthorityNormal } from './protection'
import { getSheetIndex } from '../methods/get'
import { setluckysheet_scroll_status } from '../methods/set'
import { replaceHtml } from '../utils/util'
import Store from '../store'
import locale from '../locale/locale'
import tooltip from '../global/tooltip'
import method from '../global/method'

const imageCtrl = {
  imgItem: {
    type: '3', //1移动并调整单元格大小 2移动并且不调整单元格的大小 3不要移动单元格并调整其大小
    src: '', //图片url
    originWidth: null, //图片原始宽度
    originHeight: null, //图片原始高度
    default: {
      width: null, //图片 宽度
      height: null, //图片 高度
      left: null, //图片离表格左边的 位置
      top: null, //图片离表格顶部的 位置
    },
    crop: {
      width: null, //图片裁剪后 宽度
      height: null, //图片裁剪后 高度
      offsetLeft: 0, //图片裁剪后离未裁剪时 左边的位移
      offsetTop: 0, //图片裁剪后离未裁剪时 顶部的位移
    },
    isFixedPos: false, //固定位置
    fixedLeft: null, //固定位置 左位移
    fixedTop: null, //固定位置 右位移
    border: {
      width: 0, //边框宽度
      radius: 0, //边框半径
      style: 'solid', //边框类型
      color: '#000', //边框颜色
    },
  },
  images: null,
  currentImgId: null,
  currentWinW: null,
  currentWinH: null,
  resize: null,
  resizeXY: null,
  move: false,
  moveXY: null,
  cropChange: null,
  cropChangeXY: null,
  cropChangeObj: null,
  copyImgItemObj: null,
  insertImg: function(file) {
    const uploadImage =
      Store.toJsonOptions && Store.toJsonOptions['uploadImage']
    if (typeof uploadImage === 'function') {
      // 上传形式
      uploadImage(file)
        .then((url) => {
          imageCtrl._insertImg(url)
        })
        .catch((error) => {
          tooltip.info(
            '<i class="fa fa-exclamation-triangle"></i>',
            '图片上传失败'
          )
        })
    } else {
      // 内部base64形式
      let render = new FileReader()
      render.readAsDataURL(file)

      render.onload = function(event) {
        let src = event.target.result
        imageCtrl._insertImg(src)
        $('#luckysheet-imgUpload').val('')
      }
    }
  },

  _insertImg: function(src) {
    let _this = this

    let last =
      Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]
    let rowIndex = last.row_focus || 0
    let colIndex = last.column_focus || 0
    let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1]
    let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1]

    let image = new Image()
    image.onload = function() {
      let width = image.width,
        height = image.height

      let img = {
        src: src,
        left: left,
        top: top,
        originWidth: width,
        originHeight: height,
      }

      _this.addImgItem(img)
    }
    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle']
    image.src = typeof imageUrlHandle === 'function' ? imageUrlHandle(src) : src
  },
  generateRandomId: function(prefix) {
    if (prefix == null) {
      prefix = 'img'
    }

    let userAgent = window.navigator.userAgent
      .replace(/[^a-zA-Z0-9]/g, '')
      .split('')

    let mid = ''

    for (let i = 0; i < 12; i++) {
      mid += userAgent[Math.round(Math.random() * (userAgent.length - 1))]
    }

    let time = new Date().getTime()

    return prefix + '_' + mid + '_' + time
  },
  modelHtml: function(id, imgItem) {
    let _this = this

    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle']
    let src =
      typeof imageUrlHandle === 'function'
        ? imageUrlHandle(imgItem.src)
        : imgItem.src
    let imgItemParam = _this.getImgItemParam(imgItem)

    let width = imgItemParam.width * Store.zoomRatio
    let height = imgItemParam.height * Store.zoomRatio
    let left = imgItemParam.left * Store.zoomRatio
    let top = imgItemParam.top * Store.zoomRatio
    let position = imgItemParam.position

    let borderWidth = imgItem.border.width

    return `<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width:${width}px;height:${height}px;padding:0;position:${position};left:${left}px;top:${top}px;z-index:3000;">
                    <div class="luckysheet-modal-dialog-content" style="width:100%;height:100%;overflow:hidden;position:relative;">
                        <img src="${src}" style="position:absolute;width:${imgItem
      .default.width * Store.zoomRatio}px;height:${imgItem.default.height *
      Store.zoomRatio}px;left:${-imgItem.crop.offsetLeft *
      Store.zoomRatio}px;top:${-imgItem.crop.offsetTop * Store.zoomRatio}px;" />
                    </div>
                    <div class="luckysheet-modal-dialog-border" style="border:${borderWidth}px ${
      imgItem.border.style
    } ${imgItem.border.color};border-radius:${imgItem.border.radius *
      Store.zoomRatio}px;position:absolute;left:${-borderWidth}px;right:${-borderWidth}px;top:${-borderWidth}px;bottom:${-borderWidth}px;"></div>
                </div>`
  },
  getSliderHtml: function() {
    let imageText = locale().imageText

    return `<div id="luckysheet-modal-dialog-slider-imageCtrl" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-imageCtrl" style="display:block;">
                    <div class="luckysheet-modal-dialog-slider-title">
                        <span>${imageText.imageSetting}</span>
                        <span class="luckysheet-model-close-btn" title="${imageText.close}">
                            <i class="lksticonfont luckysheet-iconfont-qingchu" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="luckysheet-modal-dialog-slider-content">
                        <div class="slider-box">
                            <div class="slider-box-title">${imageText.conventional}</div>
                            <div class="slider-box-radios">
                                <div class="radio-item">
                                    <input type="radio" id="imgItemType1" name="imgItemType" value="1">
                                    <label for="imgItemType1">${imageText.moveCell1}</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="imgItemType2" name="imgItemType" value="2">
                                    <label for="imgItemType2">${imageText.moveCell2}</label>
                                </div>
                                <div class="radio-item">
                                    <input type="radio" id="imgItemType3" name="imgItemType" value="3">
                                    <label for="imgItemType3">${imageText.moveCell3}</label>
                                </div>
                            </div>
                            <div class="slider-box-checkbox">
                                <input type="checkbox" id="imgItemIsFixedPos">
                                <label for="imgItemIsFixedPos">${imageText.fixedPos}</label>
                            </div>
                        </div>
                        <div class="slider-box">
                            <div class="slider-box-title">${imageText.border}</div>
                            <div class="slider-box-borderConfig">
                                <div class="border-item">
                                    <label>${imageText.width}</label>
                                    <input type="number" id="imgItemBorderWidth" min="0">
                                </div>
                                <div class="border-item">
                                    <label>${imageText.radius}</label>
                                    <input type="number" id="imgItemBorderRadius" min="0">
                                </div>
                                <div class="border-item">
                                    <label>${imageText.style}</label>
                                    <select id="imgItemBorderStyle">
                                        <option value="solid">${imageText.solid}</option>
                                        <option value="dashed">${imageText.dashed}</option>
                                        <option value="dotted">${imageText.dotted}</option>
                                        <option value="double">${imageText.double}</option>
                                    </select>
                                </div>
                                <div class="border-item">
                                    <label>${imageText.color}</label>
                                    <div id="imgItemBorderColor" class="imgItemBorderColor">
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`
  },
  sliderHtmlShow: function() {
    let _this = this

    $('#luckysheet-modal-dialog-slider-imageCtrl').remove()

    let sliderHtml = _this.getSliderHtml()
    $('body')
      .first()
      .append(sliderHtml)
    luckysheetsizeauto()

    let imgItem = _this.images[_this.currentImgId]

    //类型
    let type = imgItem.type
    $('#luckysheet-modal-dialog-slider-imageCtrl #imgItemType' + type).prop(
      'checked',
      true
    )

    //固定位置
    let isFixedPos = imgItem.isFixedPos
    $('#luckysheet-modal-dialog-slider-imageCtrl #imgItemIsFixedPos').prop(
      'checked',
      isFixedPos
    )

    //边框宽度
    let border = imgItem.border
    $('#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderWidth').val(
      border.width
    )
    $('#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderRadius').val(
      border.radius
    )
    $('#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderStyle').val(
      border.style
    )
    $('#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span')
      .css('background-color', border.color)
      .attr('title', border.color)

    _this.init()
  },
  colorSelectDialog: function(currenColor) {
    const _locale = locale()
    const locale_button = _locale.button
    const locale_toolbar = _locale.toolbar
    const locale_imageCtrl = _locale.imageCtrl

    $('#luckysheet-modal-dialog-mask').show()
    $('#luckysheet-imageCtrl-colorSelect-dialog').remove()

    $('body')
      .first()
      .append(
        replaceHtml(modelHTML, {
          id: 'luckysheet-imageCtrl-colorSelect-dialog',
          addclass: 'luckysheet-imageCtrl-colorSelect-dialog',
          title: locale_imageCtrl.borderTile,
          content: `<div class="currenColor">
                            ${locale_imageCtrl.borderCur}:<span title="${currenColor}" style="background-color:${currenColor}"></span>
                        </div>
                        <div class="colorshowbox"></div>`,
          botton: `<button id="luckysheet-imageCtrl-colorSelect-dialog-confirm" class="btn btn-primary">${locale_button.confirm}</button>
                        <button class="btn btn-default luckysheet-model-close-btn">${locale_button.cancel}</button>`,
          style: 'z-index:100003',
        })
      )
    let $t = $('#luckysheet-imageCtrl-colorSelect-dialog')
        .find('.luckysheet-modal-dialog-content')
        .css('min-width', 300)
        .end(),
      myh = $t.outerHeight(),
      myw = $t.outerWidth()
    let winw = $(window).width(),
      winh = $(window).height()
    let scrollLeft = $(document).scrollLeft(),
      scrollTop = $(document).scrollTop()
    $('#luckysheet-imageCtrl-colorSelect-dialog')
      .css({
        left: (winw + scrollLeft - myw) / 2,
        top: (winh + scrollTop - myh) / 3,
      })
      .show()

    //初始化选择颜色插件
    $('#luckysheet-imageCtrl-colorSelect-dialog')
      .find('.colorshowbox')
      .spectrum({
        showPalette: true,
        showPaletteOnly: true,
        preferredFormat: 'hex',
        clickoutFiresChange: false,
        showInitial: true,
        showInput: true,
        flat: true,
        hideAfterPaletteSelect: true,
        showSelectionPalette: true,
        showButtons: false, //隐藏选择取消按钮
        maxPaletteSize: 8,
        maxSelectionSize: 8,
        color: currenColor,
        cancelText: locale_button.cancel,
        chooseText: locale_toolbar.confirmColor,
        togglePaletteMoreText: locale_toolbar.customColor,
        togglePaletteLessText: locale_toolbar.collapse,
        togglePaletteOnly: true,
        clearText: locale_toolbar.clearText,
        noColorSelectedText: locale_toolbar.noColorSelectedText,
        localStorageKey: 'spectrum.textcolor' + server.gridKey,
        palette: [
          ['#000', '#444', '#666', '#999', '#ccc', '#eee', '#f3f3f3', '#fff'],
          ['#f00', '#f90', '#ff0', '#0f0', '#0ff', '#00f', '#90f', '#f0f'],
          [
            '#f4cccc',
            '#fce5cd',
            '#fff2cc',
            '#d9ead3',
            '#d0e0e3',
            '#cfe2f3',
            '#d9d2e9',
            '#ead1dc',
          ],
          [
            '#ea9999',
            '#f9cb9c',
            '#ffe599',
            '#b6d7a8',
            '#a2c4c9',
            '#9fc5e8',
            '#b4a7d6',
            '#d5a6bd',
          ],
          [
            '#e06666',
            '#f6b26b',
            '#ffd966',
            '#93c47d',
            '#76a5af',
            '#6fa8dc',
            '#8e7cc3',
            '#c27ba0',
          ],
          [
            '#c00',
            '#e69138',
            '#f1c232',
            '#6aa84f',
            '#45818e',
            '#3d85c6',
            '#674ea7',
            '#a64d79',
          ],
          [
            '#900',
            '#b45f06',
            '#bf9000',
            '#38761d',
            '#134f5c',
            '#0b5394',
            '#351c75',
            '#741b47',
          ],
          [
            '#600',
            '#783f04',
            '#7f6000',
            '#274e13',
            '#0c343d',
            '#073763',
            '#20124d',
            '#4c1130',
          ],
        ],
        move: function(color) {
          if (color != null) {
            color = color.toHexString()
          } else {
            color = '#000'
          }

          $('#luckysheet-imageCtrl-colorSelect-dialog .currenColor span')
            .css('background-color', color)
            .attr('title', color)
        },
      })
  },
  init: function() {
    let _this = this

    //关闭
    $(
      '#luckysheet-modal-dialog-slider-imageCtrl .luckysheet-model-close-btn'
    ).click(function() {
      $('#luckysheet-modal-dialog-slider-imageCtrl').hide()
      luckysheetsizeauto()
    })

    //常规
    $('#luckysheet-modal-dialog-slider-imageCtrl')
      .off('change.radio')
      .on(
        'change.radio',
        '.radio-item input[type=radio][name=imgItemType]',
        function() {
          _this.configChange('type', this.value)
        }
      )

    //固定位置
    $('#luckysheet-modal-dialog-slider-imageCtrl')
      .off('change.checkbox')
      .on(
        'change.checkbox',
        '.slider-box-checkbox input[type=checkbox]',
        function() {
          _this.configChange('fixedPos', this.checked)
        }
      )

    //边框宽度
    $('#luckysheet-modal-dialog-slider-imageCtrl')
      .off('change.borderWidth')
      .on('change.borderWidth', '#imgItemBorderWidth', function() {
        _this.configChange('border-width', this.valueAsNumber)
      })

    //边框半径
    $('#luckysheet-modal-dialog-slider-imageCtrl')
      .off('change.borderRadius')
      .on('change.borderRadius', '#imgItemBorderRadius', function() {
        _this.configChange('border-radius', this.valueAsNumber)
      })

    //边框样式
    $('#luckysheet-modal-dialog-slider-imageCtrl')
      .off('change.borderStyle')
      .on('change.borderStyle', '#imgItemBorderStyle', function() {
        _this.configChange('border-style', this.value)
      })

    //边框颜色 选择
    $('#luckysheet-modal-dialog-slider-imageCtrl')
      .off('click.color')
      .on('click.color', '#imgItemBorderColor', function() {
        let currenColor = $(this)
          .find('span')
          .attr('title')
        _this.colorSelectDialog(currenColor)
      })

    //边框选择颜色 确定
    $(document)
      .off('click.selectColorConfirm')
      .on(
        'click.selectColorConfirm',
        '#luckysheet-imageCtrl-colorSelect-dialog-confirm',
        function() {
          let $parent = $(this).parents(
            '#luckysheet-imageCtrl-colorSelect-dialog'
          )
          $('#luckysheet-modal-dialog-mask').hide()
          $parent.hide()

          let currenColor = $parent.find('.currenColor span').attr('title')
          $(
            '#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span'
          )
            .css('background-color', currenColor)
            .attr('title', currenColor)

          _this.configChange('border-color', currenColor)
        }
      )

    //image active
    $('#luckysheet-image-showBoxs')
      .off('mousedown.active')
      .on('mousedown.active', '.luckysheet-modal-dialog-image', function(e) {
        if (
          !checkProtectionAuthorityNormal(
            Store.currentSheetIndex,
            'editObjects',
            false
          )
        ) {
          return
        }

        $(this).hide()
        let id = $(this).attr('id')

        if (_this.currentImgId != null && _this.currentImgId != id) {
          _this.cancelActiveImgItem()
        }

        _this.currentImgId = id

        let item = _this.images[id]
        let imgItemParam = _this.getImgItemParam(item)

        let width = imgItemParam.width * Store.zoomRatio
        let height = imgItemParam.height * Store.zoomRatio
        let left = imgItemParam.left * Store.zoomRatio
        let top = imgItemParam.top * Store.zoomRatio
        let position = imgItemParam.position

        $('#luckysheet-modal-dialog-activeImage')
          .show()
          .css({
            width: width,
            height: height,
            left: left,
            top: top,
            position: position,
          })
        let imageUrlHandle =
          Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle']
        let imgUrl =
          typeof imageUrlHandle === 'function'
            ? imageUrlHandle(item.src)
            : item.src
        $(
          '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content'
        ).css({
          'background-image': 'url(' + imgUrl + ')',
          'background-size':
            item.default.width * Store.zoomRatio +
            'px ' +
            item.default.height * Store.zoomRatio +
            'px',
          'background-position':
            -item.crop.offsetLeft * Store.zoomRatio +
            'px ' +
            -item.crop.offsetTop * Store.zoomRatio +
            'px',
        })

        $(
          '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border'
        ).css({
          'border-width': item.border.width * Store.zoomRatio,
          'border-style': item.border.style,
          'border-color': item.border.color,
          'border-radius': item.border.radius * Store.zoomRatio,
          left: -item.border.width * Store.zoomRatio,
          right: -item.border.width * Store.zoomRatio,
          top: -item.border.width * Store.zoomRatio,
          bottom: -item.border.width * Store.zoomRatio,
        })

        _this.sliderHtmlShow()

        e.stopPropagation()
      })

    //image move
    $('#luckysheet-modal-dialog-activeImage')
      .off('mousedown.move')
      .on('mousedown.move', '.luckysheet-modal-dialog-content', function(e) {
        if (
          !checkProtectionAuthorityNormal(
            Store.currentSheetIndex,
            'editObjects',
            false
          )
        ) {
          return
        }

        if (!$('#luckysheet-modal-dialog-slider-imageCtrl').is(':visible')) {
          _this.sliderHtmlShow()
        }

        _this.move = true

        _this.currentWinW = $('#luckysheet-cell-main')[0].scrollWidth
        _this.currentWinH = $('#luckysheet-cell-main')[0].scrollHeight

        let offset = $('#luckysheet-modal-dialog-activeImage').offset()

        _this.moveXY = [e.pageX - offset.left, e.pageY - offset.top]

        setluckysheet_scroll_status(true)

        e.stopPropagation()
      })

    //image resize
    $('#luckysheet-modal-dialog-activeImage')
      .off('mousedown.resize')
      .on('mousedown.resize', '.luckysheet-modal-dialog-resize-item', function(
        e
      ) {
        if (
          !checkProtectionAuthorityNormal(
            Store.currentSheetIndex,
            'editObjects',
            false
          )
        ) {
          return
        }

        _this.currentWinW = $('#luckysheet-cell-main')[0].scrollWidth
        _this.currentWinH = $('#luckysheet-cell-main')[0].scrollHeight

        _this.resize = $(this).data('type')

        let scrollTop = $('#luckysheet-cell-main').scrollTop(),
          scrollLeft = $('#luckysheet-cell-main').scrollLeft()
        let mouse = mouseposition(e.pageX, e.pageY)
        let x = mouse[0] + scrollLeft
        let y = mouse[1] + scrollTop

        let position = $('#luckysheet-modal-dialog-activeImage').position()
        let width = $('#luckysheet-modal-dialog-activeImage').width()
        let height = $('#luckysheet-modal-dialog-activeImage').height()

        _this.resizeXY = [
          x,
          y,
          width,
          height,
          position.left + scrollLeft,
          position.top + scrollTop,
          scrollLeft,
          scrollTop,
        ]

        setluckysheet_scroll_status(true)

        e.stopPropagation()
      })

    //image croppingEnter
    $('#luckysheet-modal-dialog-activeImage')
      .off('mousedown.croppingEnter')
      .on(
        'mousedown.croppingEnter',
        '.luckysheet-modal-controll-crop',
        function(e) {
          _this.croppingEnter()
          e.stopPropagation()
        }
      )

    //image croppingExit
    $('#luckysheet-modal-dialog-cropping')
      .off('mousedown.croppingExit')
      .on('mousedown.croppingExit', '.luckysheet-modal-controll-crop', function(
        e
      ) {
        _this.croppingExit()
        e.stopPropagation()
      })

    //image crop change
    $('#luckysheet-modal-dialog-cropping')
      .off('mousedown.cropChange')
      .on('mousedown.cropChange', '.resize-item', function(e) {
        _this.cropChange = $(this).data('type')

        let scrollTop = $('#luckysheet-cell-main').scrollTop(),
          scrollLeft = $('#luckysheet-cell-main').scrollLeft()
        let mouse = mouseposition(e.pageX, e.pageY)
        let x = mouse[0] + scrollLeft
        let y = mouse[1] + scrollTop

        _this.cropChangeXY = [x, y]

        setluckysheet_scroll_status(true)

        e.stopPropagation()
      })

    //image restore
    $('#luckysheet-image-showBoxs')
      .off('mousedown.restore')
      .on('mousedown.restore', '.luckysheet-modal-controll-restore', function(
        e
      ) {
        _this.restoreImgItem()
        e.stopPropagation()
      })

    //image delete
    $('#luckysheet-image-showBoxs')
      .off('mousedown.delete')
      .on('mousedown.delete', '.luckysheet-modal-controll-del', function(e) {
        _this.removeImgItem()
        e.stopPropagation()
      })
  },
  configChange: function(type, value) {
    let _this = this

    let imgItem = _this.images[_this.currentImgId]

    switch (type) {
      case 'type':
        imgItem.type = value
        break
      case 'fixedPos':
        imgItem.isFixedPos = value

        let imgItemParam = _this.getImgItemParam(imgItem)
        let width = imgItemParam.width
        let height = imgItemParam.height
        let left = imgItemParam.left
        let top = imgItemParam.top
        let position = imgItemParam.position

        $('#luckysheet-modal-dialog-activeImage')
          .show()
          .css({
            width: width,
            height: height,
            left: left,
            top: top,
            position: position,
          })
        break
      case 'border-width':
        imgItem.border.width = value
        $(
          '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border'
        ).css({
          'border-width': value,
          left: -value,
          right: -value,
          top: -value,
          bottom: -value,
        })
        break
      case 'border-radius':
        imgItem.border.radius = value
        $(
          '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border'
        ).css('border-radius', value)
        break
      case 'border-style':
        imgItem.border.style = value
        $(
          '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border'
        ).css('border-style', value)
        break
      case 'border-color':
        imgItem.border.color = value
        $(
          '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border'
        ).css('border-color', value)
        break
    }

    _this.ref()
  },
  getImgItemParam(imgItem) {
    let isFixedPos = imgItem.isFixedPos

    let width = imgItem.default.width,
      height = imgItem.default.height,
      left = imgItem.default.left,
      top = imgItem.default.top

    if (imgItem.crop.width != width || imgItem.crop.height != height) {
      width = imgItem.crop.width
      height = imgItem.crop.height
      left += imgItem.crop.offsetLeft
      top += imgItem.crop.offsetTop
    }

    let position = 'absolute'
    if (isFixedPos) {
      position = 'fixed'
      left = imgItem.fixedLeft + imgItem.crop.offsetLeft
      top = imgItem.fixedTop + imgItem.crop.offsetTop
    }

    return {
      width: width,
      height: height,
      left: left,
      top: top,
      position: position,
    }
  },
  cancelActiveImgItem: function() {
    let _this = this

    $('#luckysheet-modal-dialog-activeImage').hide()
    $('#luckysheet-modal-dialog-cropping').hide()
    $('#luckysheet-modal-dialog-slider-imageCtrl').hide()

    let imgItem = _this.images[_this.currentImgId]
    let imgItemParam = _this.getImgItemParam(imgItem)

    let width = imgItemParam.width * Store.zoomRatio
    let height = imgItemParam.height * Store.zoomRatio
    let left = imgItemParam.left * Store.zoomRatio
    let top = imgItemParam.top * Store.zoomRatio
    let position = imgItemParam.position

    $('#' + _this.currentImgId)
      .show()
      .css({
        width: width,
        height: height,
        left: left,
        top: top,
        position: position,
      })
    $('#' + _this.currentImgId + ' img').css({
      width: imgItem.default.width * Store.zoomRatio,
      height: imgItem.default.height * Store.zoomRatio,
      left: -imgItem.crop.offsetLeft * Store.zoomRatio,
      top: -imgItem.crop.offsetTop * Store.zoomRatio,
    })
    $('#' + _this.currentImgId + ' .luckysheet-modal-dialog-border').css({
      'border-width': imgItem.border.width * Store.zoomRatio,
      'border-style': imgItem.border.style,
      'border-color': imgItem.border.color,
      'border-radius': imgItem.border.radius * Store.zoomRatio,
      left: -imgItem.border.width * Store.zoomRatio,
      right: -imgItem.border.width * Store.zoomRatio,
      top: -imgItem.border.width * Store.zoomRatio,
      bottom: -imgItem.border.width * Store.zoomRatio,
    })

    _this.currentImgId = null
  },
  addImgItem: function(img) {
    let _this = this

    let width, height
    let max = 400

    if (img.originHeight < img.originWidth) {
      height = Math.round(img.originHeight * (max / img.originWidth))
      width = max
    } else {
      width = Math.round(img.originWidth * (max / img.originHeight))
      height = max
    }

    if (_this.images == null) {
      _this.images = {}
    }

    let imgItem = $.extend(true, {}, _this.imgItem)
    imgItem.src = img.src
    imgItem.originWidth = img.originWidth
    imgItem.originHeight = img.originHeight
    imgItem.default.width = width
    imgItem.default.height = height
    imgItem.default.left = img.left
    imgItem.default.top = img.top
    imgItem.crop.width = width
    imgItem.crop.height = height

    let scrollTop = $('#luckysheet-cell-main').scrollTop(),
      scrollLeft = $('#luckysheet-cell-main').scrollLeft()

    imgItem.fixedLeft = img.left - scrollLeft + Store.rowHeaderWidth
    imgItem.fixedTop =
      img.top -
      scrollTop +
      Store.infobarHeight +
      Store.toolbarHeight +
      Store.calculatebarHeight +
      Store.columnHeaderHeight

    let id = _this.generateRandomId()
    let modelHtml = _this.modelHtml(id, imgItem)

    $('#luckysheet-image-showBoxs .img-list').append(modelHtml)

    _this.images[id] = imgItem
    _this.ref()

    _this.init()
  },
  moveImgItem: function() {
    let _this = this

    _this.move = false

    let obj = $('#luckysheet-modal-dialog-activeImage')[0]
    let item = _this.images[_this.currentImgId]

    if (item.isFixedPos) {
      item.fixedLeft = obj.offsetLeft - item.crop.offsetLeft
      item.fixedTop = obj.offsetTop - item.crop.offsetTop
    } else {
      item.default.left = obj.offsetLeft - item.crop.offsetLeft
      item.default.top = obj.offsetTop - item.crop.offsetTop
    }

    _this.ref()
  },
  resizeImgItem: function() {
    let _this = this

    _this.resize = null

    let obj = $('#luckysheet-modal-dialog-activeImage')[0]

    let item = _this.images[_this.currentImgId]
    let scaleX = obj.clientWidth / item.crop.width
    let scaleY = obj.clientHeight / item.crop.height

    item.default.width = Math.round(item.default.width * scaleX)
    item.default.height = Math.round(item.default.height * scaleY)

    item.crop.width = Math.round(item.crop.width * scaleX)
    item.crop.height = Math.round(item.crop.height * scaleY)
    item.crop.offsetLeft = Math.round(item.crop.offsetLeft * scaleX)
    item.crop.offsetTop = Math.round(item.crop.offsetTop * scaleY)

    if (item.isFixedPos) {
      item.fixedLeft = obj.offsetLeft
      item.fixedTop = obj.offsetTop
    } else {
      item.default.left = obj.offsetLeft - item.crop.offsetLeft
      item.default.top = obj.offsetTop - item.crop.offsetTop
    }

    _this.ref()
  },
  croppingEnter: function() {
    let _this = this
    _this.cropping = true

    if (
      !checkProtectionAuthorityNormal(
        Store.currentSheetIndex,
        'editObjects',
        false
      )
    ) {
      return
    }

    $('#luckysheet-modal-dialog-activeImage').hide()
    $('#luckysheet-modal-dialog-slider-imageCtrl').hide()

    let item = _this.images[_this.currentImgId]
    let imgItemParam = _this.getImgItemParam(item)

    let width = imgItemParam.width
    let height = imgItemParam.height
    let left = imgItemParam.left
    let top = imgItemParam.top
    let position = imgItemParam.position

    $('#luckysheet-modal-dialog-cropping')
      .show()
      .css({
        width: width,
        height: height,
        left: left,
        top: top,
        position: position,
      })

    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle']
    let imgSrc =
      typeof imageUrlHandle === 'function' ? imageUrlHandle(item.src) : item.src

    $('#luckysheet-modal-dialog-cropping .cropping-mask').css({
      width: item.default.width,
      height: item.default.height,
      'background-image': 'url(' + imgSrc + ')',
      left: -item.crop.offsetLeft,
      top: -item.crop.offsetTop,
    })

    $('#luckysheet-modal-dialog-cropping .cropping-content').css({
      'background-image': 'url(' + imgSrc + ')',
      'background-size':
        item.default.width + 'px ' + item.default.height + 'px',
      'background-position':
        -item.crop.offsetLeft + 'px ' + -item.crop.offsetTop + 'px',
    })

    $('#luckysheet-modal-dialog-cropping .luckysheet-modal-dialog-border').css({
      'border-width': item.border.width,
      'border-style': item.border.style,
      'border-color': item.border.color,
      'border-radius': item.border.radius,
      left: -item.border.width,
      right: -item.border.width,
      top: -item.border.width,
      bottom: -item.border.width,
    })
  },
  croppingExit: function() {
    let _this = this
    _this.cropping = false

    $('#luckysheet-modal-dialog-cropping').hide()

    let item = _this.images[_this.currentImgId]
    let imgItemParam = _this.getImgItemParam(item)

    let width = imgItemParam.width
    let height = imgItemParam.height
    let left = imgItemParam.left
    let top = imgItemParam.top
    let position = imgItemParam.position

    $('#luckysheet-modal-dialog-activeImage')
      .show()
      .css({
        width: width,
        height: height,
        left: left,
        top: top,
        position: position,
      })
    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle']
    let imgSrc =
      typeof imageUrlHandle === 'function' ? imageUrlHandle(item.src) : item.src

    $(
      '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content'
    ).css({
      'background-image': 'url(' + imgSrc + ')',
      'background-size':
        item.default.width + 'px ' + item.default.height + 'px',
      'background-position':
        -item.crop.offsetLeft + 'px ' + -item.crop.offsetTop + 'px',
    })
  },
  cropChangeImgItem: function() {
    let _this = this

    _this.cropChange = null

    let item = _this.images[_this.currentImgId]
    item.crop.width = _this.cropChangeObj.width
    item.crop.height = _this.cropChangeObj.height
    item.crop.offsetLeft = _this.cropChangeObj.offsetLeft
    item.crop.offsetTop = _this.cropChangeObj.offsetTop

    _this.ref()
  },
  restoreImgItem: function() {
    let _this = this
    let imgItem = _this.images[_this.currentImgId]

    imgItem.default.width = imgItem.originWidth
    imgItem.default.height = imgItem.originHeight

    imgItem.crop.width = imgItem.originWidth
    imgItem.crop.height = imgItem.originHeight
    imgItem.crop.offsetLeft = 0
    imgItem.crop.offsetTop = 0

    let imgItemParam = _this.getImgItemParam(imgItem)

    let width = imgItemParam.width
    let height = imgItemParam.height
    let left = imgItemParam.left
    let top = imgItemParam.top
    let position = imgItemParam.position

    $('#luckysheet-modal-dialog-activeImage')
      .show()
      .css({
        width: width,
        height: height,
        left: left,
        top: top,
        position: position,
      })

    let imageUrlHandle =
      Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle']
    let imgSrc =
      typeof imageUrlHandle === 'function'
        ? imageUrlHandle(imgItem.src)
        : imgItem.src

    $(
      '#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content'
    ).css({
      'background-image': 'url(' + imgSrc + ')',
      'background-size':
        imgItem.default.width + 'px ' + imgItem.default.height + 'px',
      'background-position':
        -imgItem.crop.offsetLeft + 'px ' + -imgItem.crop.offsetTop + 'px',
    })

    _this.ref()
  },
  removeImgItem: function() {
    let _this = this
    let imgItem = _this.images[_this.currentImgId]

    // 钩子 imageDeleteBefore
    if (!method.createHookFunction('imageDeleteBefore', imgItem)) {
      return
    }

    $('#luckysheet-modal-dialog-activeImage').hide()
    $('#luckysheet-modal-dialog-cropping').hide()
    $('#luckysheet-modal-dialog-slider-imageCtrl').hide()
    $('#' + _this.currentImgId).remove()

    delete _this.images[_this.currentImgId]
    _this.currentImgId = null

    // 钩子 imageDeleteAfter
    method.createHookFunction('imageDeleteAfter', imgItem)
    _this.ref()
  },
  copyImgItem: function(e) {
    let _this = this

    _this.copyImgItemObj = $.extend(true, {}, _this.images[_this.currentImgId])

    let clipboardData = window.clipboardData //for IE
    if (!clipboardData) {
      // for chrome
      clipboardData = e.originalEvent.clipboardData
    }

    let cpdata =
      '<table data-type="luckysheet_copy_action_image"><tr><td><td></tr></table>'

    if (!clipboardData) {
      let textarea = $('#luckysheet-copy-content')
      textarea.html(cpdata)
      textarea.focus()
      textarea.select()
      document.execCommand('selectAll')
      document.execCommand('Copy')
      // 等50毫秒，keyPress事件发生了再去处理数据
      setTimeout(function() {
        $('#luckysheet-copy-content').blur()
      }, 10)
    } else {
      clipboardData.setData('Text', cpdata)
      return false //否则设不生效
    }
  },
  pasteImgItem: function() {
    let _this = this

    if (_this.images == null) {
      _this.images = {}
    }

    let rowIndex = Store.luckysheet_select_save[0].row_focus || 0
    let colIndex = Store.luckysheet_select_save[0].column_focus || 0
    let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1]
    let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1]

    let img = $.extend(true, {}, _this.copyImgItemObj)

    img.default.left = left - img.crop.offsetLeft
    img.default.top = top - img.crop.offsetTop

    let scrollTop = $('#luckysheet-cell-main').scrollTop(),
      scrollLeft = $('#luckysheet-cell-main').scrollLeft()

    img.fixedLeft = img.default.left - scrollLeft + Store.rowHeaderWidth
    img.fixedTop =
      img.default.top -
      scrollTop +
      Store.infobarHeight +
      Store.toolbarHeight +
      Store.calculatebarHeight +
      Store.columnHeaderHeight

    let id = _this.generateRandomId()
    let modelHtml = _this.modelHtml(id, img)

    $('#luckysheet-image-showBoxs .img-list').append(modelHtml)

    _this.images[id] = img
    _this.ref()

    _this.init()
  },
  allImagesShow: function() {
    let _this = this

    $('#luckysheet-modal-dialog-activeImage').hide()
    $('#luckysheet-modal-dialog-cropping').hide()
    $('#luckysheet-modal-dialog-slider-imageCtrl').hide()
    $('#luckysheet-image-showBoxs .img-list').empty()

    if (_this.images == null) {
      return
    }

    for (let imgId in _this.images) {
      let imgItem = _this.images[imgId]
      let modelHtml = _this.modelHtml(imgId, imgItem)
      $('#luckysheet-image-showBoxs .img-list').append(modelHtml)
    }
  },
  moveChangeSize: function(rc, index, size) {
    let _this = this
    let images = $.extend(true, {}, _this.images)

    if (rc == 'row') {
      let row = Store.visibledatarow[index],
        row_pre = index - 1 == -1 ? 0 : Store.visibledatarow[index - 1]
      let changeSize = size - (row - row_pre - 1)

      for (let imgId in images) {
        let imgItem = images[imgId]
        let imgItemParam = _this.getImgItemParam(imgItem)
        let type = imgItem.type

        if (type == '1') {
          if (imgItemParam.top >= row) {
            imgItem.default.top =
              imgItemParam.top + changeSize - imgItem.crop.offsetTop
          } else {
            if (imgItemParam.top + imgItemParam.height >= row - 2) {
              if (imgItemParam.top < row + changeSize) {
                let scaleY =
                  (imgItemParam.height + changeSize) / imgItemParam.height
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                )
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY)
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                )
              } else {
                let scaleY =
                  (imgItemParam.top + imgItemParam.height - row) /
                  imgItemParam.height
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                )
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY)
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                )
                imgItem.default.top = row + changeSize - imgItem.crop.offsetTop
              }
            } else {
              if (imgItemParam.top > row + changeSize) {
                let scaleY = 1 / imgItemParam.height
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                )
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY)
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                )
                imgItem.default.top = row + changeSize - imgItem.crop.offsetTop
              } else if (
                imgItemParam.top + imgItemParam.height >
                row + changeSize
              ) {
                let scaleY =
                  (row + changeSize - imgItemParam.top) / imgItemParam.height
                imgItem.default.height = Math.round(
                  imgItem.default.height * scaleY
                )
                imgItem.crop.height = Math.round(imgItem.crop.height * scaleY)
                imgItem.crop.offsetTop = Math.round(
                  imgItem.crop.offsetTop * scaleY
                )
              }
            }
          }
        } else if (type == '2') {
          if (imgItemParam.top >= row) {
            imgItem.default.top =
              imgItemParam.top + changeSize - imgItem.crop.offsetTop
          } else if (imgItemParam.top > row + changeSize) {
            imgItem.default.top = row + changeSize - imgItem.crop.offsetTop
          }
        }
      }
    } else if (rc == 'column') {
      let col = Store.visibledatacolumn[index],
        col_pre = index - 1 == -1 ? 0 : Store.visibledatacolumn[index - 1]
      let changeSize = size - (col - col_pre - 1)

      for (let imgId in images) {
        let imgItem = images[imgId]
        let imgItemParam = _this.getImgItemParam(imgItem)
        let type = imgItem.type

        if (type == '1') {
          if (imgItemParam.left >= col) {
            imgItem.default.left =
              imgItemParam.left + changeSize - imgItem.crop.offsetLeft
          } else {
            if (imgItemParam.left + imgItemParam.width >= col - 2) {
              if (imgItemParam.left < col + changeSize) {
                let scaleX =
                  (imgItemParam.width + changeSize) / imgItemParam.width
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                )
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX)
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                )
              } else {
                let scaleX =
                  (imgItemParam.left + imgItemParam.width - col) /
                  imgItemParam.width
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                )
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX)
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                )
                imgItem.default.left =
                  col + changeSize - imgItem.crop.offsetLeft
              }
            } else {
              if (imgItemParam.left > col + changeSize) {
                let scaleX = 1 / imgItemParam.width
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                )
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX)
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                )
                imgItem.default.left =
                  col + changeSize - imgItem.crop.offsetLeft
              } else if (
                imgItemParam.left + imgItemParam.width >
                col + changeSize
              ) {
                let scaleX =
                  (col + changeSize - imgItemParam.left) / imgItemParam.width
                imgItem.default.width = Math.round(
                  imgItem.default.width * scaleX
                )
                imgItem.crop.width = Math.round(imgItem.crop.width * scaleX)
                imgItem.crop.offsetLeft = Math.round(
                  imgItem.crop.offsetLeft * scaleX
                )
              }
            }
          }
        } else if (type == '2') {
          if (imgItemParam.left >= col) {
            imgItem.default.left =
              imgItemParam.left + changeSize - imgItem.crop.offsetLeft
          } else if (imgItemParam.left > col + changeSize) {
            imgItem.default.left = col + changeSize - imgItem.crop.offsetLeft
          }
        }
      }
    }

    return images
  },
  ref: function() {
    let _this = this

    let file = Store.luckysheetfile[getSheetIndex(Store.currentSheetIndex)]
    let images = _this.images

    if (Store.clearjfundo) {
      Store.jfundo.length = 0

      Store.jfredo.push({
        type: 'imageCtrl',
        sheetIndex: Store.currentSheetIndex,
        images: file.images == null ? null : $.extend(true, {}, file.images),
        curImages: images,
      })
    }

    file.images = $.extend(true, {}, images)
    server.saveParam('all', Store.currentSheetIndex, file.images, {
      k: 'images',
    })
  },
}

export default imageCtrl
